<script>
import Child from "./Child.vue";

export default {
  name: "App",
  components: {
    Child
  },
  data(){
    return {
      isShow:true
    }
  }
}
//插槽只能访问父属性，不能访问子属性
</script>

<template>
  <div v-if="isShow">app</div>
  <child>
    <template v-slot:one>
      <div>这是app组件中的html</div>
    </template>
    <template v-slot:second>
      <button @click="isShow = !isShow">点击按钮隐藏app</button>
    </template>
    <template #third>
      <div>第三个插槽</div>
    </template>
    <div>没有定义插槽名称</div>
  </child>
</template>

<style scoped>

</style>